<template>
  <div class="page-header-index-wide">
    <a-card title="组织架构图" :bordered="false" style="padding: 10px" :body-style="{ padding: '0' }">
      <vo-basic :data="chartData" :pan="true" :zoom="true" ></vo-basic>
    </a-card>
  </div>
</template>

<script>
import { VoBasic } from 'vue-orgchart'
import { getAction } from '@/api/manage'
export default {
  components: { VoBasic },
  data() {
    return {
      chartData: {},
      url: {
        treeList: '/online/user/treeHrDepartment',
      }
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    loadTree() {
      getAction(this.url.treeList, { departmentId: '0' }).then((res) => {
        if (res.success) {
          this.chartData = res.result[0]
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .orgchart .node {
    width: auto;
}
/deep/ .orgchart .node .title {
  padding: 0 25px;
  height: 35px;
  line-height: 35px;
}
</style>